<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">

		.out{
		    /*top: 20px;*/
			width: 400px;
			height: 300px;
			margin: 0 auto;
			position: relative;
			border: 1px solid #f3cd8c;
			background-color: #f9f1e3;
		}
		.head{
			margin-top: 0px;
			height: 100px;
			width: 100%;
			background-color: #f3cd8c;
		}
		.img1{
			/*top: 20px;*/
			margin-left: 0px;
		}
       .xuanze{
        color: #fff;
        font-size: 20px;
        text-align: center;
        margin-top: 10px;
        }
    
       .ares button{
    	background-color: #f3cd8c;
    	margin-left: 10px;
    	height: 30px;
    	line-height: 30px;
    	margin-top: 10px;
    	border: none;
    	color: #fff;
    	border-radius: 5px;
    	margin-bottom: 10px;
        }
        .city{
            border: 1px solid #f3cd8c;
			background-color: #f9f1e3;
			position: absolute;
			margin-left: 400px;
			margin-top: -100px;
			width: 300px;
			display: none;
			
        }

        .areas{
        	border: 1px solid #f3cd8c;
			background-color: #f9f1e3;
			position: absolute;
			margin-left: 700px;
			margin-top: -100px;
			width: 300px;
			display: none;
			
        }


	</style>
</head>
<body>
<div class="out">
	<div class="head">
		
		<div class="img1">
		   <img src="/images/retrun.png" style="width: 20px;
			height: 20px;">
	    </div>
	    <p class="xuanze">请选择您的省份</p>
	</div>
	    <div class="ares">
	    	
			    <div class="province item">
			    	<button class="0">广西壮族自治区</button>
			    	<button>广东</button>
			    	<button>湖南</button>
			    	<button>湖北</button>
			    	<button>江苏</button>
			    </div>

			    <div class="city item">
			    	<button class="1">南宁</button>
			    	<button class="1">钦州</button>
			    	<button class="1">柳州</button>
			    	<button>广州</button>
			    	<button>佛山</button>
			    	<button>长沙</button>
			    	<button>怀化</button>
			    	<button>武汉</button>
			    	<button>黄冈</button>
			    	<button>苏州</button>
			    	<button>扬州</button>

			    </div>

			    <div class="areas item">
			    	<button>青秀区</button>
			    	<button>江南区</button>
			    	<button>钦南区</button>
			    	<button>钦北区</button>
			    	<button>鱼峰区</button>
			    	<button>城中区</button>
			    	<button>柳南区</button>
			    	<button>白云区</button>
			    	<button>天河区</button>
			    	<button>禅城区</button>
			    	<button>三水区</button>
			    	<button>天心区</button>
			    	<button>芙蓉区</button>
			    	<button>鹤城区</button>
			    	<button>中方县</button>
			    	<button>江岸区</button>
			    	<button>江汉区</button>
			    	<button>黄州区</button>
			    	<button>浠水县</button>
			    	<button>姑苏区</button>
			    	<button>相城区</button>
			    	<button>广陵区</button>
			    	<button>江都区</button>
			    </div>
	    </div>
	
</div>
<script type="text/javascript" src="/js/jquery3.JS"></script>
<script type="text/javascript">


     function Intoareas(btn){
     	 var fix=$(btn).val();

     	 // $('.province').hide();
        // $('.city').hide();
        $('.areas').show();

        $('.areas').empty();

        $.get('ares.json',function(res){
        	for(var i=0; i<res.length;i++){
        		if(fix==res[i].pid){
        			var btn='<button value="'+res[i].id+'">'+res[i].name+'</button>';

        			$('.areas').append(btn);
        		}
        	}
        })

     }


	 function Intocity(btn){

    	var pid=$(btn).val();
    	console.log(pid);
        
       
        // $('.province').hide();
       
        $('.city').show();
        $('.areas').hide();


        


        $.get('city.json',function(res){

        	$('.city').empty();


        for(var i=0;i<res.length;i++){

        	if(pid==res[i].pid){

        	var btn='<button onclick="Intoareas(this)" value="'+res[i].id+'">'+res[i].name+'</button>';

        	$('.city').append(btn);
        }
    }
        })

    }



    
    function Intoprovince(){

    	$.get('sheng.json',function(res){

    		$('.province').empty();

    		for(var i=0;i<res.length;i++){

            var btn='<button onclick="Intocity(this)"  value="'+res[i].id+'">'+res[i].name+'</button>';
              
              $('.province').append(btn);
    		}
    	});

    }



    $('.img1').click(function(){
          
        // $('.ares div').each(function(){

        // 获取城市显示或隐藏状态
        var bcity=$('.city').css('display');
        var bareas=$('.areas').css('display');

        if(bareas=='block'){
            $('.areas').hide();
        	$('.province').show();
        	$('.city').show();
           

        }
      
        if(bareas=='none' && bcity=='block'){

          $('.province').show();
          $('.city').hide();
           $('.areas').hide();
        }
        




        	// if($(this).css('display')=='block'){
        	// 	var i = $(this).index()-1;

        	// 	if(i>-1){
        	// 	$('.item').css('display','none');
        	// 	$('.item:eq('+i+')').css('display','block');
        	// 	 // $('.province').show();
        	//     }

         // // if(i>-1){
	        // // $('.item').hide();
	        // // $('.item:eq('+i+')').show();
         // // }
    

        	// }
        })

    // });



   


Intoprovince();



</script>
</body>
</html>